<template>
  <view class="parkMyCar">
    <view class="top-part">
      <block v-for="(item, index) in mycarList" :key="index">
        <view class="plate_box">
          <view class="plate_no">{{ item }}</view>
          <view class="unbind" @tap="unbind(index)">解绑</view>
        </view>
      </block>
    </view>
    <view class="btn_box">
      <view class="btn_t">最多可绑定4个车牌号</view>
      <view class="btn" @tap="addcar">添加车辆</view>
    </view>
  </view>
</template>
<script>
const util = require('@/utils/util.js')
export default {
  components: {},
  data() {
    return {
      mycarList: []
    }
  },
  onLoad() {
    this.init()
  },
  onShow() {
    this.init()
  },
  onReachBottom() {
  },

  methods: {
    init() {
      const that = this
      const mycar = wx.getStorageSync('MYCAR')
      if (mycar) {
        const mycarList = JSON.parse(mycar)
        that.mycarList = mycarList
        that.hidden_queit = false
      }
    },
    unbind(e) {
      const that = this
      var i = e
      that.mycarList.splice(i, 1)
      wx.setStorageSync('MYCAR', JSON.stringify(that.mycarList))
    },
    addcar() {
      const that = this
      if (that.mycarList.length < 4) {
        util.Tips('/pages/parking/parkAddCar/parkAddCar')
      } else {
        util.Open('成功', '最多可绑定4个车牌号')
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.top-part {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.plate_box {
  height: 136rpx;
  background-color: #fff;
  box-shadow: 2px 2px 4px #b3b3b3;
  border-radius: 13rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 87rpx;
  margin-bottom: 34rpx;
}
.plate_no {
  font-size: 36rpx;
  letter-spacing: 14rpx;
  font-weight: bold;
}
.unbind {
  border: 2rpx solid #d6823b;
  color: #d6823b;
  padding: 6rpx 30rpx;
  border-radius: 26rpx;
  font-size: 26rpx;
}
.btn_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  height: 118rpx;
}
.btn_box .btn_t {
  color: #757575;
  font-size: 26rpx;
}
.btn_box .btn {
  background-color: #d6823b;
  color: #fff;
  height: 81rpx;
  line-height: 81rpx;
  width: 80%;
  text-align: center;
  font-size: 35rpx;
  border-radius: 6rpx;
}

.top-part .title {
  font-size: 26rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  margin: 24rpx 0;
}
.license {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.edit_text {
  height: 72rpx;
  width: 72rpx;
  position: relative;
  border: 1rpx solid #727373;
  border-radius: 12rpx;
  line-height: 72rpx;
  text-align: center;
  font-size: 36rpx;
}
.license .edit_text:nth-child(2) {
  margin-right: 48rpx;
}
.license .edit_text:nth-child(2)::after {
  content: '';
  position: absolute;
  right: -34rpx;
  top: 45%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #979797;
}
.license .edit_text:nth-child(8) {
  border: 1px dashed #979797;
}
.cursor {
  width: 36rpx;
  height: 4rpx;
  background-color: #333333;
  animation: focus 1.2s infinite;
  position: absolute;
  left: 50%;
  margin-left: -18rpx;
  bottom: 14rpx;
}
.friendlyAlert {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
}
.query_btn {
  background-color: #dc7233;
  width: 80%;
  height: 74rpx;
  border-radius: 10rpx;
  line-height: 74rpx;
  text-align: center;
  color: white;
  letter-spacing: 6rpx;
  margin: 0 auto;
}
.queit {
  padding: 109rpx auto;
  margin: 64rpx 180rpx;
  border-radius: 9rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  font-size: 32rpx;
  background-color: #f1f1f1;
  height: 79rpx;
}
.queit .plantno {
  line-height: 79rpx;
  letter-spacing: 8rpx;
}
.queit .iconfont {
  margin: 15rpx;
  margin-left: 30rpx;
  color: #f1f1f1;
  font-size: 46rpx;
  background-color: #ccc;
  height: 44rpx;
  border-radius: 24rpx;
}
.log_box {
  padding: 54rpx 40rpx;
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.log_menu_box {
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.log_menu_img {
  display: flex;
  justify-content: center;
}
.log_menu_img image {
  width: 78rpx;
  height: 78rpx;
}
</style>
